<template>
    <div class="listDiv">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="name" label="申请人" width="100"> </el-table-column>
            <el-table-column prop="cover" label="头像" width="100">
                <template #default="props" width="60">
                    <el-image style="width: 40px; height: 40px" fit="contain" :preview-src-list="[proxy.$setting.globalUrl.fileurl+ '/visitor/'+ props.row.face.split(',')[0]]" :src="proxy.$setting.globalUrl.fileurl+ '/visitor/'+ props.row.face.split(',')[0]">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="联系电话" width="100"> </el-table-column>
            <el-table-column prop="matter" label="申请事由"></el-table-column>
            <el-table-column prop="intime" label="申请时间" width="100"></el-table-column>
            <el-table-column prop="verify" label="审核详情"></el-table-column>
            <el-table-column prop="verify_time" label="审核时间" width="100"></el-table-column>
            <el-table-column prop="" label="审核" width="100">
                <template #default="props">
                    <div v-if="!props.row.verify">
                        <span class="pointer success-color mr10" @click="verify(props.row.visitor_id,1)">通过</span>
                        <span class="pointer danger-color" @click="verify(props.row.visitor_id,2)">拒绝</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete,Timer,Phone,User,Position } from '@element-plus/icons-vue'

    let { proxy } = getCurrentInstance()
    let obj = reactive({
        total: 0,
        list:[],
        sifterForm: {
            currentpage: 1,
            pagesize: 10
        },
    });

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'visitor/verify/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const verify = (id,state)=>{
        proxy.$ajax({url: 'visitor/verify',data: {visitor_id:id,state:state},bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                proxy.elMessageMixin('审核成功！', 'success')
                updalist();
            }else{proxy.elMessageMixin('审核失败！', 'error')}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    
    let { list, sifterForm, form, isEdit, ruleFormRef, types, total } = toRefs(obj)
</script>

<style lang="scss" scoped>
  .el-table{//为了不遮盖预览图
    & ::v-deep th.el-table__cell,
    ::v-deep td.el-table__cell {
      // 设置position 使得 子元素不与其产生新的层叠关系
      position: static;
    }
  }
</style>